<template>
  <div class="coupon_panel">
    <div class="amount_text">
      <div class="amount_value" v-if="el.type === 1"><span>{{el.amount}}</span></div>
      <div class="discount_value" v-else><span>{{(10 - el.amount / 10).toFixed(1)}}折</span></div>
      <div class="condition_value">{{el.condition ? "满" + el.condition + "元可用" : "无使用门槛"}}</div>
    </div>
    <div class="title_text">
      <div class="title_value" v-if="el.status !== 0"><s>{{el.ticketName}}</s><span class="status_value">{{statusText}}</span></div>
       <div class="title_value" v-else>{{el.ticketName}}<span class="status_value">{{statusText}}</span></div>
     <div class="expire_value">有效期：{{el.startTime | dateFormat('YYYY.MM.DD')}} 至 {{el.endTime | dateFormat('YYYY.MM.DD')}}</div>
    </div>
  </div>
</template>
<script>
export default {
    name: 'item-ecoupon',
    props: {
        el: Object
		},
		computed: {
			statusText() {
				if (this.el.status === -1) {
					return '已过期';
				} else if (this.el.status === 1) {
					return '已使用';
				} else {
					return '';
				}
			}
		}
}
</script>
<style lang="scss" scoped>
.coupon_panel {
	display: flex;
	margin: 10px;
	padding: 10px 0;
}

.amount_text {
	flex: 1;
	padding: 10px;

	.amount_value, .discount_value {
		color: $red;
		font-size: 18px;
	}

	.amount_value ::before {
			content: "¥";
			font-size: 8px;
			margin-right: 3px;
	}

	.condition_value {
		color: gray;
		font-size: 12px;
		margin-top: 5px;
	}
}

.title_text {
	flex: 2;
	padding: 10px;

	.title_value {
		font-size: 18px;
	}
	.expire_value {
		color: gray;
		font-size: 12px;
		margin-top: 5px;
	}
	.status_value {
		text-align: right;
		font-size: 12px;
		color: brown;
		margin-left: 20px;
	}
}

</style>
